<template>
	<view>
		<u-navbar   :is-back="true" title="收藏" :title-bold="true" :title-size="34"
					:background="{background:'#f1f1f1'}"
					title-color="#404133" :border-bottom="false"  z-index="1001">
		</u-navbar>
		<view class="u-p-20">
			<view>
				 <u-search 
					 v-model="params.keyword"
					 placeholder="搜索内容" 
					 shape="square" :height="80" 
					 :show-action="false"
					:input-style="{fontSize:'34rpx'}" 
					 color="#000000" bg-color="#ffffff" search-icon-color="#909399"
					 @blur="resetSearch"
           @search="resetSearch"
          >
				</u-search>
			</view>
			 <view class="u-m-t-10" style="background-color: #ffffff;border-radius: 10rpx;">
			 	<u-dropdown ref="uDropdown" @open="open" @close="close" border-bottom>
					<u-dropdown-item v-model="params.content_type" height="800"  :title="typeTitle" :options="collTypeOptions" @change="typeChange"></u-dropdown-item>
			 	</u-dropdown>
			 </view>
			 <!-- <view v-if="searchCase.tagCase||searchCase.typeCase" class="u-flex u-row-left u-col-center u-m-t-6">
			 	<view v-if="searchCase.typeCase" class="u-m-r-10">
			 		<u-tag :text="searchCase.typeCase.label" mode="dark" type='info' 
					 @close="tagClose(0)"  :closeable ="true"></u-tag>
			 	</view>
			 	<view v-if="searchCase.tagCase" class="u-m-l-10">
			 		<u-tag :text="searchCase.tagCase.label" mode="dark"  type='info' 
					 @close="tagClose(1)" :closeable ="true"></u-tag>
			 	</view>
			 </view> -->
		</view>

    <view class="s">
      <view class="item u-m-20 u-p-20 u-m-b-20 u-row-between u-col-center" v-for="item in list" :key="item.id" style="background-color: #ffffff;">
        <template v-if="item.message.content_type === 'TEXT'">
          <view class="item-title u-m-b-20">{{item.message.content.t}}</view>
        </template>
        <view style="display: flex; margin-bottom: 40rpx; flex-wrap: wrap;" v-else-if="item.message.content_type === 'IMAGE'">
          <u-image :lazy-load="true"
            :key="index"
            class="img"
            mode="aspectFill" :src="img.path" v-for="(img, index) in item.message.content.qs" style="width: 120rpx; height: 120rpx; margin-right: 10rpx; margin-bottom: 10rpx;"
            @tap="showPic(item, img)"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>
        </view>
        <view class="u-flex u-font-xs u-row-between u-col-center u-type-info">
          <view class="item-left">
            {{ item.message.user.name }}
          </view>
          <view class="date">
            {{ item.message.created_at }}
          </view>
        </view>
      </view>
      <u-empty text="暂无数据" mode="list" v-if="!list.length"></u-empty>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        params: {
          page: 1,
          keyword: '',
          is_end: false,
          loading: false,
          content_type: ''
        },
				searchCase:{
					typeCase:null,
					tagCase:null,
				},
        list: [],
				collType:'',
				collTag:'',
				collTypeOptions:[
					{label: '全部',value: ""},
					{label: '文字',value: "TEXT"},
					{label: '图片',value: "IMAGE"},
					// {label: '文件',value: "3"},
					// {label: '链接',value: "4"},
					// {label: '位置',value: "5"},
					// {label: '聊天记录',value: "6"},
				],
				collTagOptions:[
				]
			};
		},
    computed: {
      typeTitle () {
        const f = this.collTypeOptions.find(s => s.value === this.params.content_type)
        if (f) return f.label
        return '全部'
      }
    },
    onLoad () {
      this.getPage()
    },
    onReachBottom () {
      this.getPage()
    },
		methods:{
      showPic(item, img) {
        console.log(item.message.content.qs.map(s => s.path), img.path)
        uni.previewImage({
          current: img.path,
          indicator: 'default',
          urls: item.message.content.qs.map(s => s.path)
        })
			},
      resetSearch () {
        this.params.page = 1
        this.params.is_end = false
        this.list = []
        this.getPage()
      },
      async getPage () {
        if (this.params.loading || this.params.is_end) return
        this.params.loading = true
        try {
          const res = await this.$u.api.chatGroup.pageFavorite({...this.params})
          this.list.push(...res.data.rows)
          if (!res.data.rows.length) this.params.is_end = true
          this.params.page++
          this.params.loading = false
        } catch (error) {
          this.params.loading = false
        }
      },
			//去添加收藏
			toAddCollection:function(){
				let that=this;
				console.log("去添加收藏");	
				that.$u.route("/pages/my/collection/insert-collection-content");
			},
			search:function(e){
				let that=this;
				console.log("收藏搜索关键字",e);	
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			//收藏类型筛选
			typeChange:function(value){
        this.params.content_type = value
        this.resetSearch()
			},
			//收藏标签筛选
			tagChange:function(value){
				let that=this;
				that.searchCase.tagCase=null;
				for (var i = 0; i < this.collTagOptions.length; i++) {
					let tag= this.collTagOptions[i];
					if(tag.value==value){
						that.searchCase.tagCase=tag;
					}
				}
			},
			//关闭标签
			tagClose:function(index){
				this.$refs.uDropdown.highlight();

				if(index==0){
          this.params.content_type="";
				}
				this.resetSearch()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
<style>
	page{
		background-color: #f1f1f1;
	}
</style>
